<template>
  <div class="detail-wrapper">
    <div>{{ detail.name }}</div>

    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="BaseMess">
        <BaseMess />
      </el-tab-pane>
      <el-tab-pane label="工作信息" name="WorkRecord">
        <WorkRecord />
      </el-tab-pane>
      <el-tab-pane label="考评信息" name="Assessment">
        <Assessment />
      </el-tab-pane>
      <el-tab-pane label="社会关系信息" name="SocialRelation">
        <SocialRelation />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  components: {
    BaseMess: () => import('./parts/BaseMess.vue'),
    Assessment: () => import('./parts/Assessment.vue'),
    SocialRelation: () => import('./parts/SocialRelation.vue'),
    WorkRecord: () => import('./parts/WorkRecord.vue'),
  },
  data() {
    return {
      // 详情信息
      detail: {
        name: '张三',
        avatar: '',
      },
      activeName: 'BaseMess',
    };
  },
};
</script>
<style lang="scss" scoped>
.detail-wrapper {
  background-color: #fff;
}
</style>
